<template>
<div>
  <Del/>
</div>
</template>

<script>

import Del from "../components/detail.vue";
export default{
  name:"Detail",
  props:["id"],
  data(){
    return {
     
    }
  
  },
  components:{
    Del,
  },
  methods:{
    goCard(){
      this.$router.push({
        name: "cart",
        params:{
          
        }
      },
  
        
      )
    }
  },
  mounted(){
    //console.log(this.$route.params.id);
  } 
 
}

</script>

<style lang="scss" scoped>
@charset 'utf-8';
@import '../../public/scss/common.scss';

//vw单位响应式布局
@function get($a) {
  @return ($a/1920)*100+vw
}

.MobileShop{
overflow: hidden;
width: get(1920);
margin-top: get(160);
//background-color: $color1;
 //布局盒子 头部商品挑选
>.selectShops{
  width: get(1920);
  //商品居中盒子
  >.selectShopsBox{
    overflow: hidden;
    @extend.container;
    //头部一引导路由页面
    >.shopHeader{ 
      text-align: left;
    }
    //具体内容
    >.shopContent{ 
      justify-content: space-around;
      width: get(1500);
      margin-top: get(20);
      //左边轮播图待定
      >.contentLeft{
         width: get(560);
         height: get(660);
         background-color: #ddd;
      }
      //选择商品各项属性
      >.contentRight{
        overflow: hidden;
        width: get(800);
         height: get(660);
         text-align: left;
         //margin-right: get(100);

        >h1{
          margin-top: get(10);
          margin-bottom: get(30);
          font-size: get(24);
        }
        >.price{ 
          overflow: hidden;
          width: get(800);
          padding-left: get(6);
          background-color: $color1;
          >h5{
            font-size: get(18);
            font-weight: 400;
            margin-top: get(10);
            span{ 
              margin-left: get(10);
              color: $color;
              font-size: get(24);
            }
          }
          >h6{
            font-size: get(18);
            font-weight: 400;
            margin-top: get(10);
            margin-bottom: get(10);
            span{ 
              margin-left: get(10);
            }
          }
        }
        >.serve{ 
          
          margin-top: get(10);
          h5{
            font-weight: 340;
          }
        }
        >.selectItem{ 
          margin-top: get(10);
          //width: get(400);
          >p{
            font-size: get(20);
            margin-bottom: get(18);
          }
          >.colorRight{ 
            margin-top: get(6);
            //margin-right: get(320);
            justify-content: flex-start;
            >li{ 
              margin: 0 get(6);
             padding: 0 0;
              border: 1px solid #000;
              font-size: get(18);
              &:visited{
                border: 1px solid $color;
              }
              
            }
          }
        }
        >.joinCart{ 
          margin-top: get(20);
          button{ 
            width: get(40);
           margin: 0 get(10);
          
           &:nth-child(4){
            height: get(50);
            color: #fff;
           background-color: $color;
           border: 1px solid $color;
           border-radius: get(40);
           }
          }
          >.cart{ 
            margin-left: get(20);
            width: get(150);
            height: get(60);
          }
        }
       
      }
    }
  }
}
>.shopDetail{ 
margin-top: get(60);
border: 1px solid #000 ;
>.shopDetailHeader{ 
  width: get(1920);
  height: get(100);
  background-color: $color1;
  display: flex;
  align-items: center;
  //margin-top: get(60);
  >ul{ 
    justify-content: space-around;
    >li{ 
      font-size: get(22);
      font-weight: 600;
      &:hover{
        color: $color;
      }
    }
  }
}
}
}
</style>
